import { useCallback, useEffect } from "react";
import { Button, Form, Input, message } from "antd";
import { useForm } from "antd/es/form/Form";
import { useNavigate } from "react-router-dom";

import { getUserInfo, alterInfo, updateUserInfoCaptcha } from "../../api/login";

import { HeadPicUpload } from "./HeadPicUpload";

import "./update-info.css";

export interface UserInfo {
    headPic: string;
    nickName: string;
    email: string;
    captcha: string;
}

export const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}


export const UpdateInfo = ()=>{
    const [form] = useForm();
    useEffect(()=>{
        const query = ()=>{
            getUserInfo().then(res=>{
                const {data} = res;
                if(res.status === 201 || res.status === 200) {
                    form.setFieldValue("headPic", data.headPic);
                    form.setFieldValue("nickName", data.nickName);
                    form.setFieldValue("email", data.email);
                }
            }, err=>{
                message.error("获取用户信息失败");
            })
        }
        query();
    }, [])
    const sendCaptcha = useCallback(async ()=>{
        const res = await updateUserInfoCaptcha();
        if(res.status === 201 || res.status === 200) {
            message.success("验证码发送成功")
        }else {
            message.error("系统繁忙，请稍后重试");
        }
    }, []);
    const onFinish = useCallback(async (values: UserInfo)=>{
        const res = await alterInfo(values);
        if(res.status === 201 || res.status === 200) {
            message.success('用户信息更新成功');
        } else {
            message.error('系统繁忙，请稍后再试');
        }
    }, [])


    return(
        <div className="update-info">
            <Form
                form={form}
                {...layout1}
                colon={false}
                autoComplete="off"
                onFinish={onFinish}
            >
                <Form.Item
                    label="头像"
                    name="headPic"
                    rules={[{required: true, message: "请输入头像"}]}
                    shouldUpdate
                >
                    <HeadPicUpload></HeadPicUpload>
                </Form.Item>
                <Form.Item
                    label="昵称"
                    name="nickName"
                    rules={[{required: true, message: "请输入昵称"}]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[
                        {required: true, message: "请输入邮箱"},
                        {type: 'email', message: "请输入合法邮箱地址"}
                    ]}
                >
                    <Input disabled />
                </Form.Item>
                <div className="update-info__captcha">
                    <Form.Item
                        label="验证码"
                        name="captcha"
                        rules={[{required: true, message: "请输入验证码"}]}
                    >
                        <Input />
                    </Form.Item>
                    <Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
                </div>
                

                <Form.Item
                    label=" "
                >
                    <Button className="update-info__btn" type="primary" htmlType="submit">修改用户信息</Button>
                </Form.Item>
            </Form>
        </div>
    )
}